Angular অ্যাপ্লিকেশনের ভিউ বা UI (User Interface) মূলত টেম্পলেট (Template) দ্বারা তৈরি হয়। টেম্পলেট হলো HTML কোডের একটি অংশ, যা কম্পোনেন্টের ডেটাকে UI হিসেবে উপস্থাপন করে। Angular এর টেম্পলেট ডাইনামিক এবং ইন্টারঅ্যাকটিভ উপায়ে ডেটা এবং লজিক ম্যানিপুলেট করতে সাহায্য করে।
টেম্পলেট হলো HTML এর একটি বিশেষ অংশ, যেখানে Angular এর ডেটা বাইন্ডিং এবং ডিরেক্টিভ ব্যবহৃত হয়। এটি Angular কম্পোনেন্টের UI বা ভিউ তৈরি করে। টেম্পলেটের মাধ্যমে আপনি ডাইনামিকভাবে ডেটা ডিসপ্লে করতে পারেন এবং ইউজারের ইনপুট গ্রহণ করতে পারেন।
<h1>{{ title }}</h1>
<p>{{ description }}</p>
<button (click)="changeTitle()">Change Title</button>
এখানে:
{{ title }} হলো Interpolation (ডেটা বাইন্ডিং) যা title ভেরিয়েবল থেকে ডেটা নিয়ে কম্পোনেন্টের টেম্পলেটে দেখায়।(click)="changeTitle()" হলো Event Binding, যা ব্যবহারকারীর ক্লিকের ইভেন্টকে হ্যান্ডল করে।এটি কম্পোনেন্টের ডেটাকে HTML টেম্পলেটের মধ্যে সন্নিবেশিত করতে ব্যবহৃত হয়।
উদাহরণ:
<h1>{{ title }}</h1>
এখানে title কম্পোনেন্টের একটি প্রোপার্টি, যা HTML টেম্পলেটে দেখানো হচ্ছে।
এটি টেম্পলেটের HTML প্রোপার্টিতে ডেটা বাইন্ডিং করতে ব্যবহৃত হয়।
উদাহরণ:
<img [src]="imageUrl">
এখানে [src] একটি প্রপার্টি বাইন্ডিং, যা imageUrl কম্পোনেন্টের প্রোপার্টি থেকে ডেটা গ্রহণ করে।
এটি ইউজারের ইভেন্ট (যেমন ক্লিক, কীবোর্ড ইনপুট ইত্যাদি) এর সাথে অ্যাকশনের সম্পর্ক স্থাপন করতে ব্যবহৃত হয়।
উদাহরণ:
<button (click)="onClick()">Click Me</button>
এখানে (click) হলো ইভেন্ট বাইন্ডিং, যা ইউজারের ক্লিক ইভেন্টকে কম্পোনেন্টের onClick() মেথডের সাথে যুক্ত করে।
এটি কম্পোনেন্টের প্রোপার্টি এবং ইউজারের ইনপুট একে অপরের সাথে সিঙ্ক্রোনাইজ করতে ব্যবহৃত হয়।
উদাহরণ:
<input [(ngModel)]="name">
এখানে [(ngModel)] হলো Two-way Binding, যা name প্রোপার্টির মান ইনপুট ফিল্ডের মাধ্যমে পরিবর্তন করে এবং ইনপুট ফিল্ডে যেকোনো পরিবর্তন হলে তা name প্রোপার্টিতে সিঙ্ক্রোনাইজ করে।
ডিরেক্টিভ হলো Angular এর একটি বিশেষ ফিচার যা DOM-এর আচরণ পরিবর্তন করতে ব্যবহৃত হয়। টেম্পলেটে বিভিন্ন ধরণের ডিরেক্টিভ ব্যবহার করা হয়, যা HTML এলিমেন্টের আচরণ বা চেহারা পরিবর্তন করতে সাহায্য করে।
Structural Directives DOM এ এলিমেন্ট যোগ বা সরানোর জন্য ব্যবহৃত হয়। এগুলি * দিয়ে শুরু হয়।
উদাহরণ:
*ngIf: একটি এলিমেন্ট শো বা হাইড করতে।*ngFor: একটি লিস্ট বা অ্যারে থেকে আইটেমগুলোর উপর লুপ করতে।<div *ngIf="isVisible">This content is visible</div>
<ul>
<li *ngFor="let item of items">{{ item }}</li>
</ul>
Attribute Directives HTML এলিমেন্টের আচরণ পরিবর্তন করতে ব্যবহৃত হয়, কিন্তু DOM থেকে এলিমেন্টের আর্কিটেকচার পরিবর্তন করে না।
উদাহরণ:
ngClass: একটি এলিমেন্টের ক্লাস অ্যাড বা রিমুভ করতে।ngStyle: একটি এলিমেন্টের স্টাইল পরিবর্তন করতে।<div [ngClass]="{ 'highlight': isHighlighted }">Highlighted Text</div>
<div [ngStyle]="{ 'color': textColor }">Styled Text</div>
Pipes ডেটাকে টেম্পলেটের মধ্যে ফরম্যাট করতে ব্যবহৃত হয়। উদাহরণস্বরূপ, তারিখ বা সংখ্যা ফরম্যাট করা।
উদাহরণ:
<p>{{ today | date }}</p>
<p>{{ price | currency }}</p>
Template Variables হলো টেম্পলেটের মধ্যে এমন ভেরিয়েবল, যা DOM উপাদানগুলোকে রেফারেন্স করতে ব্যবহৃত হয়।
উদাহরণ:
<input #myInput>
<button (click)="doSomething(myInput.value)">Click Me</button>
Angular এর টেম্পলেট এবং ভিউ ব্যবহারের মাধ্যমে, আপনি আপনার অ্যাপ্লিকেশনকে ডাইনামিক এবং ইউজার-ফ্রেন্ডলি বানাতে পারেন।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
